<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8"/>
    <title>
      幽灵按钮
    </title>
    <link rel="stylesheet" type="text/css" href="./index.css"></link>
    <script type="text/javascript" src="./jquery-2.1.1.min.js">
    </script>
    <script type="text/javascript" src="./index.js">
    </script>
  </head>
  <body>
    <div class="box">
      <div class="link link-mission">
          <span class="icon"></span>
          <a class="button" href="#" data-title="My misson is clear">
            <span class="line line-top"></span>
            <span class="line line-bottom"></span>
            <span class="line line-left"></span>
            <span class="line line-right"></span>
            Mission
          </a>
      </div>
      <div class="link link-play">
          <span class="icon"></span>
          <a class="button" href="#" data-title="This is my playground">
            <span class="line line-top"></span>
            <span class="line line-bottom"></span>
            <span class="line line-left"></span>
            <span class="line line-right"></span>
            Play
          </a>
      </div>
      <div class="link link-touch">
          <span class="icon"></span>
          <a class="button" href="#" data-title="Let's do something together">
            <span class="line line-top"></span>
            <span class="line line-bottom"></span>
            <span class="line line-left"></span>
            <span class="line line-right"></span>
            Touch
          </a>
      </div>
      <div class="tip">
        <em></em>
        <span></span>
      </div>
    </div>
    <script>
    window.onload=function(){
      hello();
    }

    $(function(){
      $(".link .button").hover(function(){
        var title = $(this).attr("data-title");
        $(".tip em").text(title);
        var left = $(this).offset().left;
        var distance = ($(".tip").outerWidth()-$(this).outerWidth())/2;
        var position = left - distance;
        $(".tip").css({"left":position+"px"}).animate({"top":195,"opacity":1},300);
      },function(){
        $(".tip").animate({"top":160,"opacity":0},300);
      })
    })
    </script>
  </body>
</html>
